<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>sound recorder</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="wrapper">
      <main>
        <svg width="0" height="0" aria-hidden="true">
          <defs>
            <clipPath id="record-clip">
              <circle cx="12" cy="12" r="12" />
            </clipPath>
            <linearGradient id="record-grad" x1="1" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#000" />
              <stop offset="100%" stop-color="#fff" />
            </linearGradient>
            <mask id="record-mask">
              <rect
                x="0"
                y="0"
                width="24"
                height="24"
                fill="url(#record-grad)"
              />
            </mask>
          </defs>
          <symbol id="play" viewBox="0 0 24 24">
            <polygon
              points="8 6,18 12,8 18"
              fill="currentColor"
              stroke="currentColor"
              stroke-linejoin="round"
              stroke-width="2"
            />
          </symbol>
          <symbol id="record" viewBox="0 0 24 24">
            <g clip-path="url(#record-clip)" fill="none" stroke-width="18">
              <circle cx="12" cy="12" r="12" stroke="var(--yellow-orange)" />
              <g mask="url(#record-mask)">
                <circle cx="12" cy="12" r="12" stroke="var(--red-orange)" />
              </g>
            </g>
          </symbol>
          <symbol id="stop" viewBox="0 0 24 24">
            <rect rx="2" ry="2" x="6" y="6" width="12" height="12" />
          </symbol>
        </svg>
        <div class="tb1">
          <div class="tb1__grid">
            <div class="tb1__cell tb1__cell--speakers"></div>
            <button class="tb1__cell" type="button">
              <div class="tb1__button">
                <svg
                  class="tb1__icon"
                  width="20px"
                  height="20px"
                  aria-hidden="true"
                >
                  <use xlink:href="#play" />
                </svg>
                <span class="tb1__sr-only">Play</span>
              </div>
            </button>
            <button class="tb1__cell" type="button">
              <div class="tb1__button">
                <svg
                  class="tb1__icon"
                  width="20px"
                  height="20px"
                  aria-hidden="true"
                >
                  <use xlink:href="#stop" />
                </svg>
                <span class="tb1__sr-only">Stop</span>
              </div>
            </button>
            <div class="tb1__cell tb1__cell--display">
              <div class="tb1__rec">
                <span class="tb1__rec-light"></span>
                <span class="tb1__display-label"></span>
              </div>
              <div class="tb1__bars">
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--30p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--35p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--40p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--45p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--50p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--55p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--60p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--65p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--blue tb1__bar--on tb1__bar--70p"
                ></div>
                <span class="tb1__display-label">Vol</span>
              </div>
              <div class="tb1__bars">
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <div
                  class="tb1__bar tb1__bar--purple tb1__bar--tall tb1__bar--25p"
                ></div>
                <span class="tb1__display-label">Mic</span>
              </div>
            </div>
            <button class="tb1__cell" type="button">
              <div class="tb1__button">
                <svg
                  class="tb1__icon"
                  width="20px"
                  height="20px"
                  aria-hidden="true"
                >
                  <use xlink:href="#record" />
                </svg>
                <span class="tb1__sr-only">Record</span>
              </div>
            </button>
            <div class="tb1__cell">
              <div class="tb1__dial">
                <button
                  class="tb1__dial-control"
                  type="button"
                  aria-describedby="100%"
                  style="
                    --shadow-before-rotate: -359.99995517632766;
                    --shadow-after1-x: 85.35531140010417%;
                    --shadow-after1-y: 85.35536671852894%;
                    --shadow-after2-x: 14.644688599895822%;
                    --shadow-after2-y: 14.644633281471064%;
                    translate: none;
                    rotate: none;
                    scale: none;
                    transform: translate3d(0px, 0px, 0px) rotate(360deg);
                    touch-action: none;
                    cursor: grab;
                    user-select: none;
                  "
                >
                  <span class="tb1__sr-only">Volume</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <script src="./script.js" type="text/javascript"></script>
  </body>
</html>
